<template>
    <div class="container">
        <!-- 头部 -->
	    <head-message></head-message>
        <!-- 用户信息 -->
        <div class="user-area">
            <div class="user-left">
                <div class="hd">
                    <div class="icon">
                        <img src="../assets/money-icon.png" alt="">
                    </div>
                    <div class="text">当前余额:{{userInfo.salesManBalance}}</div>
                </div>
                <div class="bd">
                    <div class="withdraw-btn" @click="toWithdraw">点击提现</div>
                </div>
            </div>
            <div class="user-right">
                <div class="hd">
                    <div class="highter-num">上级人员：{{heigherlevelNum}}人</div>
                    <div class="work-type">
                        状态：{{userInfo.salesManWorkStatus == 1 ? "工作中" : "休息中"}}
                    </div>
                </div>
                <div class="bd">
                    <div class="group-num">组织人数：{{GroupCount}}人</div>
                    <div class="lower-num">下级人数：{{lowlevelNum}}人</div>
                </div>
            </div>
        </div>
        <!-- 查看上下级 -->
        <div class="nav">
            <div class="nav-list">
                <div class="nav-item" @click="tohighter">
                    <div class="text">我的上级</div>
                    <div class="icon">
                        <img src="../../public/static/icon-right.png" alt="">
                    </div>
                </div>
                <div class="nav-item" @click="toLower">
                    <div class="text">我的下级</div>
                    <div class="icon">
                        <img src="../../public/static/icon-right.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import HeadMessage from '@/components/head-message/index.vue'
import { getgroupcount,levelCount} from "@/api/user";
import {mapActions,mapState} from "vuex"
export default {
    components:{
		HeadMessage
	},
    data(){
        return{
            // 组织人数
            GroupCount: 0,
            // 上级人数
            heigherlevelNum:0,
            // 下级人数
            lowlevelNum:0
        }
    },
    computed:{
        ...mapState(["userInfo",])
    },
    created(){
        this.loadData()
    },
    methods:{
        // 初始数据
        loadData() {
            getgroupcount().then((res) => {
            console.log(res);
            this.GroupCount = res;
            });
            // 获取上下级人数
            // 1:上级人数
            levelCount({type:1}).then(res=>{
                // console.log(res)
                this.heigherlevelNum=res
            })
            // 2:下级人数
            levelCount({type:-1}).then(res=>{
                // console.log(res)
                this.lowlevelNum=res
            })
        },
        // 去体现
        toWithdraw(){
            if(this.userInfo.realNameAuthentication!=1){
                this.$toast("请先实名认证");
                this.$router.push({path:"/sure"})
            }else{
                this.$router.push({path:"/withdrawform"})
            }
            
        },
        // 去下级
        toLower(){
            this.$router.push({path:"/lower"})
        },
        // 去上级
        tohighter(){
            this.$router.push({path:"/highter"})
        }
    }
}
</script>
<style lang="less" scoped>
.container{
    background-color: #F9F9FA;
}
// 用户信息 
.user-area{
    display: flex;
    padding: 0.5rem 0.3rem;
    background-color: #fff;
    margin: 0.15rem 0;
    justify-content: space-between;
}
.user-left{
    .hd{
        display: flex;
        font-size: 0.28rem;
        align-items: center;
        .icon{
            margin-right: 0.2rem;
        }
    }
    .withdraw-btn{
        margin-top: 0.2rem;
        width: 1.75rem;
        height: 0.45rem;
        border-radius: 0.3rem;
        background-color: #FF0000;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 600;
        font-size: 0.24rem;
    }
}
.user-right{
    font-size: 0.28rem;
    .hd{
        display: flex;
        .highter-num{
            margin-right: 0.23rem;
        }
    }
    .bd{
        display: flex;
        margin-top: 0.37rem;
        .group-num{
            margin-right: 0.23rem;
        }
    }
}
// 导航
.nav-list{
    padding: 0 0.34rem;
    background-color: #fff;
    .nav-item{
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        color: #222;
        border-bottom: 1px solid #ddd;
        line-height: 0.9rem;
    }
}
</style>